<style type="text/css">
    .focus-trigeminy-group{background-color: #FFF;display: block;padding: 9px;margin: 16px 1px 1px 1px;border-style: dashed;border-width: 1px;border-color: #DDD;position: relative;box-shadow: 3px 3px 0 rgba(204,204,204,0.1);cursor: n-resize;}
    .focus-trigeminy-group{width: 608px;padding: 9px 1px 9px 9px;}
    h5{font-size: 13px;color: #0099CC;}
    .focus-trigeminy-group ul{font-size: 0;overflow: hidden;}
    .focus-trigeminy-group ul li{background-color: #FFF;letter-spacing: normal;word-spacing: normal;vertical-align: top;display: inline-block;width: 173px;padding: 4px;margin: 1px 11px 1px 1px;border: dashed 1px #DDD;cursor: e-resize;}
    .full-screen-slides ul li .del, .focus-trigeminy-group .del, .sale-layout dl .del{font: 10px/14px Tahoma;color: #19AEDE;text-align: center;background-color: #FFF;display: none;width: 14px;height: 14px;border: solid 1px #19AEDE;border-radius: 8px;position: absolute;z-index: 1;top: -6px;right: -6px;cursor: pointer;}
    .focus-trigeminy-group ul li .focus-thumb{line-height: 0;text-align: center;vertical-align: middle;display: table-cell;width: 173px;height: 120px;overflow: hidden;cursor: pointer;}
    .focus-trigeminy-group ul li img{max-width: 173px;max-height: 120px;margin-top: expression(120-this.height/2);}
    #SearchGoods{position: fixed;top: 25%;width: 620px;left: 50%;margin-left: -325px;border:5px solid rgba(148, 148, 148, 0.45);border-radius: 5px;max-height: 440px;overflow: auto;}
    .focus-trigeminy-group ul{padding-top: 10px;}
    .focus-trigeminy-group ul li{position: relative;overflow: initial;}
    .focus-trigeminy-group ul li p{width: 100%;margin: 0;left: 0;font-size: 14px;position: absolute;bottom: 0;background: rgba(0, 0, 0, 0.5);color: #fff;line-height: 24px;height: 24px;overflow: hidden;}
    .focus-trigeminy-group{padding-top: 0;}
    .focus-trigeminy-group:hover .del{display: none;}
    .focus-trigeminy-group ul li:hover .del{display: block;}
    .add_goods ul li:hover .del{display: none;}
    .del_he{font-size: 14px;color: #19AEDE;text-align: center;background-color: #FFF;width: 20px;height: 20px;border: solid 1px rgba(148, 148, 148, 0.45);position: absolute;z-index: 1;top: 3px;right: 3px;cursor: pointer;}
    .input_small{width: 125px;}
</style>
<div class="admin">
    <div class="tab panel dux-box admin-panel">
        <div class="panel-head"><strong>添加活动专题商品</strong></div>
        <div class="padding border-bottom">
            <a id="addguige" href="javascript:(0)" class="button button-small border-green">增加</a>
            <a id="reduceguige" href="javascript:(0)" class="button button-small border-green">减少</a>
        </div>
        <div class="fixed-empty"></div>
        <form id="myform" name="myform" method="post" action="">
            <div style="position:relative;width: 1250px;" id="div_guige">
                <foreach item="v" name="goodList" key="k">
                    <table class="table tb-type2">
                        <tbody>
                            <tr>
                                <td colspan="2" class="required"><label class="validation" for="title">分类名称:</label></td>
                            </tr>
                            <tr>
                                <td class="vatop rowform"><input type="text" class="form-control" value="{$k}" datatype="*" size="30" /></td>
                                <td class="vatop tips"></td>
                            </tr>
                            <tr>
                                <td class="vatop rowform">
                                    <div class="focus-trigeminy-group delete_goods">
                                        <div class="title"><h5>推荐商品</h5></div>
                                        <ul class="ui-sortable">
                                            <foreach item="m" name="v">
                                                <li pic_id="1">
                                                    <a class="del" title="删除">X</a>
                                                    <div class="focus-thumb"><img title="{$m['goods_title']}" src="{$m['goods_thumb']}"></div>
                                                    <p>{$m['goods_title']}</p>
                                                    <input type="hidden" name="{$k}[]" value="{$m['goods_id']}" />
                                                </li>
                                            </foreach>
                                        </ul>
                                    </div>
                                    <input add_id="0" type="button" class="input input_small onclick_input" value="选择商品"  id="start_time" />
                                </td>
                                <td class="vatop tips"></td>
                            </tr>
                        </tbody>
                    </table>
                </foreach>

            </div>
            <input type="submit" name="" id="" class="button bg-main" value="提交" />
        </form>
        <div id="SearchGoods" style="display: none;background-color: #FFF;">
            <a class="del_he" title="删除">X</a>
            <table class="tb-type1 noborder search">
                <tbody>
                    <tr>
                        <th><label for="query_start_time">商品分类：</label></th>
                        <td id="recommend_gcategory">
                            <input type="hidden" id="cate_id" name="cate_id" value="0" class="mls_id" />
                            <input type="hidden" id="cate_name" name="cate_name" value="" class="mls_names" />
                            <select class="inputL input_small">
                                <option value="0">-请选择-</option>
                                <foreach item='v' name="cate">
                                    <option value="{$v['cat_id']}">{$v['cat_name']}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><label>商品名称：</label></th>
                        <td><input class="input input_big txt2" type="text" name="order_sn" value=""></td>
                        <td><a  class="button bg-main" onclick="chaxun($(this))">查询</a></td>
                    </tr>
                </tbody>
            </table>
            <div class="focus-trigeminy-group add_goods">
                <ul class="ui-sortable"></ul>
            </div>
        </div>

    </div>
</div>


<script type="text/javascript">
    gcategoryInit("recommend_gcategory");
    var _this = null;
    //增加商品属性 
    var htmlg = '<table class="table tb-type2"><tbody><tr><td colspan="2" class="required"><label class="validation" for="title">分类名称:</label></td></tr><tr><td class="vatop rowform"><input type="text" class="form-control" datatype="*" size="30" /></td><td class="vatop tips"></td></tr><tr><td class="vatop rowform"><div class="focus-trigeminy-group delete_goods"><div class="title"><h5>推荐商品</h5></div><ul class="ui-sortable"></ul></div><input type="button" class="input input_small onclick_input" value="选择商品"  id="start_time" /></td><td class="vatop tips"></td></tr></tbody></table>';

    $("#addguige").click(function () {
        $("#div_guige").prepend(htmlg);
        $("#SearchGoods").hide();
        $("#SearchGoods").find(".ui-sortable").html(" ")
    });

    $("#reduceguige").click(function () {
        var num = $("#div_guige table").length;
        if (num != 1) {
            $("#div_guige table:first").remove();
            add_id--;
        }
    });

    $(".form-control").blur(function () {
        $(this).parents(".tb-type2").find(".ui-sortable").find("input").attr("name", $(this).val() + "[]");
        consloe.log();
    })

    $("body").on("click", ".onclick_input", function () {
        var o = $(this).parents("table").find(".form-control").val();
        if (!o) {
            alert("请输入商品分类名称,再添加商品");
            return;
        }
        _this = $(this).siblings(".delete_goods").find("ul");
        $("#SearchGoods").show();
        $("#SearchGoods").find(".ui-sortable").html(" ")
    })
    $("body").on("click", ".del_he", function () {
        _this = null;
        $("#SearchGoods").hide();
    })
    $("body").on("click", ".add_goods li", function () {
        a($(this));
    })
    $("body").on("click", ".delete_goods li", function () {
        d($(this));
    })
    function a(obj) {  //添加元素
        var a = obj.attr("pic_id");
        var p = null;
        _this.find("li").each(function () {
            if ($(this).attr("pic_id") == a) {
                alert("请不要重复添加");
                exit;
            }
        })
        _this.append(obj.clone());
    }
    function d(obj) {  //删除元素
        var a = obj.attr("pic_id");
        obj.remove();
    }
    function chaxun(obj) { //ajax请求数据
        var o = _this.parents("table").find(".form-control").val();
        var cate_id = $("#cate_id").val();
        var keys = $(".txt2").val();
        var dete = {"cate_id": cate_id, "keys": keys, "cla_id": o}
        var htmls = Aajax("{:U('Admin/getGoodsList')}", dete);
        obj.parents("#SearchGoods").find(".ui-sortable").html(htmls)
    }
</script>
<script type="text/javascript">
    $('#myform').layer({});
</script>
